<template>
  <div style="margin-top: 20px" v-if="!is_h5s">
    <el-form>
      <div class="auth-outer">
        <div style="width: 100%">
          <div class="auth-item" style="width: 320px; height: 300px">
            <div class="auth-item-header">
              <el-tag size="large" style="font-size: 13px"
                >当前选择:{{
                  `${forments.yearDate}年-${
                    semesterData[forments.semesterIndex].label
                  }-${classData[forments.classIndex].label}`
                }}</el-tag
              >
            </div>
            <el-scrollbar>
              <div style="margin: 10px 0px 50px 0px; padding: 5px">
                <div>
                  <el-date-picker
                    style="width: 100%"
                    v-model="forments.yearDate"
                    type="year"
                    :clearable="false"
                    value-format="YYYY"
                    :disabled-date="disabledDate"
                    @change="changeYear"
                    placeholder="请选择年份"
                  />
                </div>
                <div>
                  <el-alert type="info">
                    时间区间提示：
                    <p>&nbsp;</p>

                    <p>1月15日 至 7月15 为上半学期</p>
                    <p>&nbsp;</p>
                    <p>7月16日 至 1月14 为下半学期</p>
                  </el-alert>
                </div>
                <el-menu
                  :default-active="forments.semesterIndex"
                  class="el-menu-vertical-demo"
                >
                  <el-menu-item
                    v-for="(item, index) in semesterData"
                    :key="item.index"
                    :index="index"
                    @click="changeSemester('semesterIndex', index)"
                  >
                    <span>{{ item.label }}</span>
                  </el-menu-item>
                </el-menu>
              </div>
            </el-scrollbar>
          </div>
          <div class="auth-item" style="height: calc(100vh - 420px)">
            <el-scrollbar>
              <div class="auth-title">
                数据选择：
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="数据范围"
                  placement="right"
                >
                  <el-icon><question-filled /></el-icon>
                </el-tooltip>
              </div>
              <div style="margin-bottom: 50px">
                <el-menu
                  :default-active="forments.classIndex"
                  class="el-menu-vertical-demo"
                >
                  <el-menu-item
                    v-for="(item, index) in classData"
                    :key="item.index"
                    :index="index"
                    @click="changeSemester('classIndex', index)"
                  >
                    <span>{{ item.label }}</span>
                  </el-menu-item>
                </el-menu>
              </div>
            </el-scrollbar>
          </div>
        </div>
        <div
          class="auth-item"
          style="height: calc(100vh - 120px); width: calc(100% - 320px)"
        >
          <div class="auth-title">
            {{
              `${forments.yearDate}年${
                semesterData[forments.semesterIndex].label
              }${classData[forments.classIndex].label}`
            }}数据
            <el-tooltip
              effect="dark"
              :content="`${forments.yearDate}年${
                semesterData[forments.semesterIndex].label
              }${classData[forments.classIndex].label}数据`"
              placement="right"
            >
              <el-icon><question-filled /></el-icon>
            </el-tooltip>
          </div>
          <el-scrollbar>
            <div style="margin: 20px 20px 90px 20px">
              <shoolListVue
                ref="shoolLists"
                :modes="forments.classIndex"
                :tableData="DataList"
                :pageparm="pageparm"
              />
              <Pagination
                v-bind:child-msg="pageparm"
                @callFather="callFather"
              ></Pagination>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </el-form>
  </div>
  <div v-else>
    <div class="h5_tops">
      <el-affix :offset="70">
        <div class="tops_boxs">
          <el-date-picker
          :editable='false'
            style="width: 100%; border: none"
            v-model="forments.yearDate"
            type="year"
            :clearable="false"
            value-format="YYYY"
            :disabled-date="disabledDate"
            @change="changeYear"
            placeholder="请选择年份"
          >
          
        </el-date-picker>
          <!--  <el-menu
                  :default-active="forments.semesterIndex"
                  class="el-menu-vertical-demo"
                >
                  <el-menu-item
                    v-for="(item, index) in semesterData"
                    :key="item.index"
                    :index="index"
                    @click="changeSemester('semesterIndex', index)"
                  >
                    <span>{{ item.label }}</span>
                  </el-menu-item>
                </el-menu> -->
          <div style="width: 100%">
            <el-dropdown style=""  trigger="click" class="selesBoxs1"> 
              <div class="selesBoxs">
                {{ semesterData[forments.semesterIndex].label
                }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </div>
               
              
              <template #dropdown>
                <el-menu
                  :default-active="forments.semesterIndex"
                  class="el-menu-vertical-demo"
                >
                  <el-menu-item
                    v-for="(item, index) in semesterData"
                    :key="item.index"
                    :index="index"
                    @click="changeSemester('semesterIndex', index)"
                  >
                    <span>{{ item.label }}</span>
                  </el-menu-item>
                </el-menu>
              </template>
            </el-dropdown>
          </div>
          <div style="width: 100%">
            <el-dropdown  trigger="click"  class="selesBoxs1">
              <div  class="selesBoxs" >
                {{ classData[forments.classIndex].label
                }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </div>
              <template #dropdown>
                <el-menu
                  :default-active="forments.classIndex"
                  class="el-menu-vertical-demo"
                >
                  <el-menu-item
                    v-for="(item, index) in classData"
                    :key="item.index"
                    :index="index"
                    @click="changeSemester('classIndex', index)"
                  >
                    <span>{{ item.label }}</span>
                  </el-menu-item>
                </el-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-affix>
    </div>
    <shoolListVue
      ref="shoolLists"
      :is_h5s="is_h5s"
      :modes="forments.classIndex"
      :tableData="DataList"
      :pageparm="pageparm"
    />
    <Pagination v-if="DataList.length"
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
    <!-- <div style="width: 100%; height: 100vh">底部占用</div> -->
  </div>
</template>

<script >
import { schoolList, timetableList } from "@/api/api";
import XEUtils from "xe-utils";
import shoolListVue from "@/components/shoolList.vue";
import Pagination from "@/components/Pagination.vue";
import config from "@/config/index";

export default {
  name: "authorityManage",
  components: { shoolListVue, Pagination },
  data() {
    return {
      is_h5s: false,
      DataList: [], //data数据
      // 默认数据
      forments: {
        yearDate: new Date().getFullYear().toString(), //年份
        classIndex: 0, // 班级数据下标
        semesterIndex: 0, // 学期数据下标
        timeArr: [],
      },
      semesterData: [
        {
          label: "上学期",
          start: "01-15",
          end: "07-15",
        },
        {
          label: "下学期",
          start: "07-16",
          end: "01-14",
        },
      ],
      classData: [
        {
          label: "班级信息",
        },
        {
          label: "督课信息",
        },
      ],
      // 分页数据
      pageparm: {
        page: 1,
        per_page: 10,
        total: 0,
      },
      // 默认
      pageparmInit: {
        page: 1,
        per_page: 10,
        total: 0,
      },
      data: [],
      roleObj: {
        name: null,
        data_range: null,
      },
      loadingPage: false,
      optionsData: [],
      optionsDataAll: [],
      disabledDate: (time) => {
        const currentYear = new Date().getFullYear();
        const minYear = 2010;
        return time.getFullYear() < minYear || time.getFullYear() > currentYear;
      },
    };
  },
  computed: {
    years() {
      return 2023;
    },
  },
  created() {
    // this.pageRequest();
  },
  mounted() {
    this.checkScreenSize();
    // this.yearDate = new Date().getFullYear().toString();
    // 年份
    this.forments.yearDate = this.checkAndAdjustYear(
      this.forments.yearDate
    ).toString();
    // 获取数据
    this.SoData();
    // 开始时间和结束时间赋值
    // //console.log(typeof this.yearDate, "----当前年份");
  },
  methods: {
    checkScreenSize() {
      // 屏幕尺寸符合以及移动端开启
      if (window.innerWidth <= 768 && config.isMobile) {
        this.is_h5s = true;
      } else {
        this.is_h5s = false;
      }
    },
    callFather(parm) {
      this.pageparm.page = parm.page;
      this.pageparm.per_page = parm.per_page;
      //console.log("分页", parm);
      this.SoData();
    },
    changeYear(e) {
      // 年份选择变化
      let that = this;
      // //console.log("年份选择", typeof e);
      this.forments.yearDate = this.checkAndAdjustYear(e);

      // //console.log(typeof this.yearDate, "----当前年份");
      that.SoData();
    },
    timearrs() {
      //开始时间和结束时间修改
      this.forments.timeArr = [
        `${this.forments.yearDate}-${
          this.semesterData[this.forments.semesterIndex].start
        }`,
        `${
          this.forments.semesterIndex == 1
            ? (Number(this.forments.yearDate) + 1).toString()
            : this.forments.yearDate
        }-${this.semesterData[this.forments.semesterIndex].end}`,
      ];
    },
    // 获取基本数据班级数据和督课数据
    SoData() {
      // 时间数据修改
      this.timearrs();

      let objs = { ...this.pageparm };
      //console.log("分页", objs);

      objs.timeall = this.forments.timeArr;
      // 学校数据修改
      this.$refs.shoolLists.loadingPage = true;
      this.DataList = [];
      if (this.forments.classIndex == 0) {
        schoolList(objs)
          .then((res) => {
            if (res.code == 1) {
              this.DataList = res.data.data;
              // // 将列表数据转换为树形数据
              this.pageparm.page = res.data.current_page;
              this.pageparm.per_page = res.data.per_page;
              this.pageparm.total = res.data.total;
              this.$refs.shoolLists.loadingPage = false;
            }
          })
          .catch((err) => {
            this.$refs.shoolLists.loadingPage = false;

            this.DataList = [];
          });
      } else {
        timetableList(objs)
          .then((res) => {
            this.$refs.shoolLists.loadingPage = false;

            if (res.code == 1) {
              this.DataList = res.data.data;
              // // 将列表数据转换为树形数据
              // this.tableData = XEUtils.toArrayTree(res.data.data, { parentKey: 'parent', strict: false })
              this.pageparm.page = res.data.current_page;
              this.pageparm.per_page = res.data.per_page;
              this.pageparm.total = res.data.total;
            }
          })
          .catch((err) => {
            this.$refs.shoolLists.loadingPage = false;

            this.DataList = [];
          });
      }
    },
    // 上学期和下学期数据选择
    changeSemester(type, index) {
      if (this.forments[type] != index) {
        this.forments[type] = index;
        this.pageparm = { ...this.pageparmInit };
        this.SoData();
      }
    },
    // 开始年份计算
    checkAndAdjustYear(yearDate) {
      const currentDate = new Date();
      const currentYear = currentDate.getFullYear();
      const currentMonth = currentDate.getMonth() + 1; // 月份从0开始，需要加1
      const currentDay = currentDate.getDate();
      if (currentYear == yearDate) {
        if (currentMonth > 7 || (currentMonth === 7 && currentDay >= 16)) {
          // 如果当前日期在下半学期区间
          this.forments.semesterIndex = 1; 
        } else {
          // 如果当前日期在上半学期区间
          this.forments.semesterIndex = 0;
          // 如果当前日期在上半学期，年份减1

          // 你在这里写逻辑如果是上学期 同年的话 判断日期是否在 01-15之前 如果在之前 就年份减一

          if (currentMonth === 1 && currentDay <= 15)
            return (currentYear - 1).toString();
        }
      }

      // 如果当前日期不在 yearDate 年，或者在下半学期，年份保持不变
      return yearDate.toString();
    },
    // 所有自定义权限时,勾选的部门节点数据
    getDeptAllCheckedKeys() {},
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    /**
     * 菜单树点击,全选权限部分数据
     * @param data
     */
    handleCheckClick(data, checked) {},
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
};
</script>

<style lang="scss" scoped>
.h5_tops {
}
.el-tree {
  width: 100%;
}
.auth-title {
  display: flex;
  font-size: 15px;
  background: var(--l-headertitle-bg);
  padding: 15px;
  .el-tooltip {
    cursor: pointer;
  }
}
.custom-tree-node {
  .menu-data {
    display: flex;
    margin: 10px 0;
  }
}
.auth-outer {
  display: flex;
  column-gap: 10px;
  .auth-item {
    flex: 1;
    background: var(--el-bg-color);
    /*&:last-child{*/
    /*    flex: 2;*/
    /*}*/
    .auth-item-header {
      background: var(--l-headertitle-bg);
      padding: 6.5px 15px;
      display: flex;
      justify-content: space-between;
    }
  }
}
.filter-tree {
  ::v-deep(.el-tree-node__content) {
    height: 40px;
  }
}
.lymenupermisson {
  ::v-deep(.el-tree-node__content) {
    height: 30px;
  }
}
.tops_boxs {
  width: 100%;
  background: #fff;
  padding: 3px 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  display: flex;
  align-items: center;
  border-radius: 2px;
  .el-input__wrapper{
    box-shadow: none;
  }
}
.selesBoxs1{
  width: 100%;padding:0 10px;box-sizing: border-box
}
.selesBoxs{
  width: 100%;display: flex;justify-content: space-between
}
</style>
<style>
.tops_boxs .el-input__wrapper{
  box-shadow: none;
}
</style>
